<template>
  <div class="music-list">
    <div class="list-top">
        <div class="back" @click="handleBack">
          <i class="icon-back"></i>
        </div>
          <h1 class="title" v-html="title"></h1>
          <div class="bg-img" :style="bgStyle" ref="bgImage">
            <div class="play-wrapper">
              <div class="play-btn" ref="playBtn" @click="random">
                <i class="icon-play"></i>
                <span>随机播放全部</span>
              </div>
            </div>
            <div class="filter" ref="filter"></div>
          </div>
    </div>
    <div class="bg-layer" ref="layer"></div>
    <scroll :data="songs" class="song-list-wrapper"
    ref="list"
    :listenScroll="listenScroll"
    :probeType="probeType"
    @changeScroll="Scroll"
    >
      <div class="songs-container">
        <song-list :songs="songs" @select="handleSelected" :rank="rank"></song-list>
        <loading v-if="!songs.length"></loading>
      </div>
    </scroll>
  </div>
</template>
<script>
import SongList from 'base/song-list/song-list'
import Scroll from 'base/scroll/scroll'
import {prefixStyle} from 'common/js/dom'
import Loading from 'base/loading/loading'
import {mapActions} from 'vuex'
import {playlistMixin} from 'common/js/mixin'
const REVERSED_HEIGHT = 80
let transform = prefixStyle('transform')
let backdrop = prefixStyle('backdrop-filter')

export default {
  name: 'musicList',
  mixins: [playlistMixin],
  data () {
    return {
      listenScroll: true,
      probeType: 3,
      scrollY: 0
    }
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    bgImg: {
      type: String,
      default: ''
    },
    songs: {
      type: Array,
      default: () => []
    },
    rank: {
      type: Boolean,
      default: false
    }
  },
  mounted () {
    this.imgHeight = this.$refs.bgImage.clientHeight
    this.$refs.list.$el.style.top = `${this.imgHeight}px`
    this.minTransformY = -this.imgHeight + REVERSED_HEIGHT
  },
  computed: {
    bgStyle () {
      return `background-image:url(${this.bgImg})`
    }
  },
  methods: {
    handlePlaylist (playlist) {
      const bottom = playlist.length > 0 ? '120px' : ''
      this.$refs.list.$el.style.bottom = bottom
      this.$refs.list.refresh()
    },
    random () {
      this.randomPlay({list: this.songs})
    },
    handleBack () {
      this.$router.back()
    },
    Scroll (pos) {
      this.scrollY = pos.y
    },
    handleSelected (item, index) {
      this.selectPlay({list: this.songs, index})
    },
    ...mapActions(['selectPlay', 'randomPlay'])
  },
  watch: {
    scrollY (newVal) {
      let translateY = Math.max(this.minTransformY, newVal)
      let zIndex = 0
      let blur = 0
      let scale = 1
      let percent = Math.abs(newVal / this.imgHeight)
      if (newVal > 0) {
        scale = 1 + percent
        zIndex = 10
      } else {
        blur = Math.min(20, percent * 20)
      }
      this.$refs.layer.style[transform] = `translate3d(0,${translateY}px,0)`
      this.$refs.filter.style[backdrop] = `blur(${blur}px)`
      if (newVal < this.minTransformY) {
        zIndex = 10
        this.$refs.bgImage.style.paddingTop = 0
        this.$refs.bgImage.style.height = `${REVERSED_HEIGHT}px`
        this.$refs.playBtn.style.display = 'none'
      } else {
        this.$refs.bgImage.style.paddingTop = '70%'
        this.$refs.bgImage.style.height = 0
        this.$refs.playBtn.style.display = ''
      }
      this.$refs.bgImage.style[transform] = `scale(${scale})`
      this.$refs.bgImage.style.zIndex = zIndex
    }
  },
  components: {
    SongList,
    Scroll,
    Loading
  }
}
</script>
<style lang="scss" scoped>
@import 'common/scss/variable.scss';
.music-list{
  background: $color-background;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  .list-top{
    width: 100%;
    position: relative;
    .back{
      position: absolute;
      top: 0;
      left: 0.12rem;
      z-index: 99;
      .icon-back{
        display: block;
        font-size: 0.44rem;
        padding: 0.2rem;
        color: $color-theme;
      }
    }
    .title{
      position: absolute;
      top: 0;
      left: 10%;
      width: 80%;
      line-height: 0.8rem;
      text-align: center;
      font-size: 0.36rem;
      margin: 0 auto;
      z-index: 99;
    }
    .bg-img{
      padding-top: 70%;
      background-size: cover;
      position: relative;
      .filter{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(7,17,27,0.4);
      }
      .play-wrapper{
        width: 100%;
        position: absolute;
        bottom: 0.2rem;
        text-align: center;
        z-index: 1;
        .play-btn{
          width: 2.7rem;
          height: 0.64rem;
          border-radius: 0.32rem;
          border: 1px solid $color-theme;
          margin: 0 auto;
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          .icon-play{
            font-size: 0.36rem;
            color: $color-theme;
            margin-right: 0.12rem;
          }
          span{
            font-size: 0.24rem;
            color: $color-theme;
          }
        }
      }
    }
  }
  .bg-layer{
    width: 100%;
    height: 100%;
    position: relative;
    background: $color-background;
    z-index: 2;
  }
  .song-list-wrapper{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 3;
    // overflow: hidden;
  }
}
</style>
